<template>
  <div class="wrapper">
    <header class="main-header">
      <!-- Logo -->
      <span class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"></span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg">K-BSES</span>
      </span>
      <!-- Header Navbar -->
      <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button -->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
          <span class="sr-only"></span>
        </a>
        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav right10">
            <!-- User Account: style can be found in dropdown.less -->
            <li class="dropdown" v-if="$store.getters.getLoginState === true">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                <span class="glyphicon glyphicon-user"></span> {{ $store.getters.getUserData.username}}
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#" class="btn btn-default btn-flat" v-on:click="logout">退 出</a>
                </li>
                <li>
                  <a href="#" class="btn btn-default btn-flat" v-on:click="changePWDialog = true">修改密码</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <aside class="main-sidebar">
      <!-- sidebar: style can be found in sidebar.less -->
      <section class="sidebar">
        <leftNav></leftNav>
      </section>
      <!-- /.sidebar -->
    </aside>
    <div class="content-wrapper right10 border">
      <loginPage v-if="$store.getters.getLoginState === false"></loginPage>
      <router-view v-else></router-view>
    </div>
    <footer class="main-footer top10 right10 border">@2018-2021</footer>
    <el-dialog
    title="修改密码"
    :visible.sync="changePWDialog"
    width="50%">
      <changePW :user="$store.getters.getUserData" @close="changePWDialog = false"></changePW>
    </el-dialog>
    <!-- 弹出框 -->
    <el-dialog
      :title="alertTitle"
      :visible.sync="alertOpen"
      width="40%">
      <div v-html="alertBody"></div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import loginPage from '@/views/login.vue'
import leftNav from './views/leftNav.vue'
// 导入修改密码控件
import changePW from './views/SystemSet/changePW.vue'

export default {
  name: 'App',
  data () {
    return {
      alertOpen: false,
      alertTitle: "",
      alertBody: "",
      changePWDialog: false,
      // 默认路由
      DefaultPath: {
        ADMIN: '/homePage',
        ORGADMIN: '/homePage',
        APPRAISER: '/healthPersonnel',
        ORG: '/orgKpi',
      }
    }
  },
  components: {
    leftNav,
    loginPage,
    changePW
  },
  methods: {
    logout () {
      this.$store.dispatch('logout')
      // this.$route.fullPath = this.$route.path = this.$route.name = null
      // this.$router.push({path: '/'})
    },
    alert(body, title, open) {
      this.alertTitle = title
      this.alertBody = body
      this.alertOpen = open
    }
  },
  created () {
    Vue.prototype.$alert = this.alert
    // console.log('created:', this.$route)
    if (this.$route.fullPath === '/' && this.$store.getters.getUserData.userType) {
      // console.log(this.$store.getters.getUserData.userType, this.DefaultPath[this.$store.getters.getUserData.userType])
      // this.$router.push({path: this.DefaultPath[this.$store.getters.getUserData.userType]})
      this.$router.push({path: this.DefaultPath['ORG']})
    }
  },
  updated () {
    // console.log('updated:', this.$route)
    if (this.$route.fullPath === '/' && this.$store.getters.getUserData.userType) {
      // console.log(this.$store.getters.getUserData.userType, this.DefaultPath[this.$store.getters.getUserData.userType])
      // this.$router.push({path: this.DefaultPath[this.$store.getters.getUserData.userType]})
      this.$router.push({path: this.DefaultPath['ORG']})

    }
  }
}
</script>

<style>
</style>
